锋利的 jQuery

会不定期的保持更新

作者 Haojen Ma 日期 2015-12-17
jQuery
锋利的 jQuery

1 DOM对象和 JQ 对象的区别

JQ 对象就是通过 JQ 包装 DOM 对象后产生的对象, JQ 对象是 JQ 独有的, 这意味着如果一个对象是 JQ 对象,那么就可以使用 JQ 里面的方法; 需要注意的是 JQ 对象无法使用 DOM 对象的任何方法,同样的 DOM 对象也无法使用 JQ 里的任何方法

JQ 对象与 DOM 对象的互转

  1. 将 JQ 对象转换成 DOM 对象的两种方法, JQ 对象是一个类似数组的对象
    1. 可以通过用 [index]的方法得到相应的 DOM 对象: $("someID")[index]
    2. 通过 get(index)方法得到相应的 DOM 对象: $someJQobj.get(0)
  2. DOM对象转成 JQ 对象, 只需要用$()把 DOM 对象包装起来, 就可以获得一个 JQ 对象了:$(DOM)

2 JQ 选择器

JQ 的选择器获取的永远是对象, 即使网页上没有此元素,. 所以当判断 JQ 选择器选择的某个元素是否存在于网页中时,不能使用 if 语句,而是在 if 判断语句里判断元素的长度,或者将 JQ 对象转换成 DOM 对象:

if($("obj").length>)
if($("obj")[0])

JQ 选择器分为 基本选择器, 层次选择器, 过滤选择器和表单选择器.

  1. 基本选择器 alt text
  2. 层次选择器(一共7个)
  3. 过滤选择器
    1. 基本过滤
    2. 内容过滤
    3. 可见性过滤
    4. 属性过滤
    5. 子元素过滤
    6. 表单对象属性过滤
  4. 表单选择器

3 JQ中的 DOM 操作

利用 JQ 创建一个元素节点,然后插入到文档中

 var $span = $("<p></p>").html("someinfo");
 或者简写成 $("<p/>")
 	 $("document").append($span)

添加节点的方法们

删除节点的方法们(3种)

  1. remove()
  2. detach()
  3. empty()

复制节点

  1. clone() //需要注意的被复制的新元素并不具有任何行为

替换节点

如果在替换之前, 已经为元素绑定了时间,替换后原先绑定的事件将会与被替换的元素一起消失

  1. replaceWith()
  2. replaceAll()

包裹节点

  1. wrap()
  2. wrapAll()
  3. wrapInner()

属性操作

  1. 设置属性
  2. 获取属性
  3. 删除属性

Class 操作

  1. addClass()
  2. removeClass()
  3. hasClass //判断 效果等价与 .is()

焦点事件

  1. focus()
  2. blur() defaultValue //用来获取表单默认的 value

遍历节点

  1. children()用来遍历匹配的元素的子元素,而不考虑其他后代元素
  2. next()
  3. prev()
  4. siblings()
  5. closest()

JQ中的事件和动画

  1. event.stopPropagation() // 用来阻止事件冒泡
  2. event.preventDefault 阻止元素自身的默认行为 如果想同时应用两者, 可以在事件对象上 return false
  3. event.pageX & event.pageY 获取光标相对于页面的 X 和 Y 坐标.

动画

JQ 中的动画效果都可以指定4中动画参数, slow , normal , fast ,和自定义数值

  1. hide() 会将该元素的 display 设置为none动画状态时,会改变元素的高度,宽度,不透明度,show 方法也是如此
  2. show() hide方法会在将元素隐藏之前保存它之前的 display 状态,从而 show()便可以恢复它之前的 display 状态这两者在不带参数的情况下是立刻隐藏/显示所匹配的元素,不会有任何动画
  3. fadeIn() 只改变元素的透明度, 显示出来
  4. fadeOut() 同上, 只是隐藏元素
  5. slideUp() 只改变元素的高度
  6. slideDown() 同上
  7. animate(params, speed ,callback)
    1. params: 一个包含样式属性及值的映射,如{property1:"val",property2:"val"}
    2. spedd : 速度
    3. callback : 回调函数 其他变种动画
  8. toggle 切换隐藏和显示
  9. slideToggle 只切换高度
  10. fadeTo 只调整元素的不透明度
  11. fadeToggle 切换元素的不透明度

动画队列

  1. 一组元素上的动画效果
    1. 当在一个 animate 方法中应用多个属性时, 动画是同时发生
    2. 当以链式的写法应用动画方法时, 动画是按照顺序发生的
  2. 多组元素上的动画效果
    1. 默认情况下,动画都是同时发生的
    2. 当以回调的形式应用动画方式时,动画是按照回调的顺序发生的 需要注意的是:在动画方法中,其他非动画的方法会插队

3 表单

prop() 和 attr()的应用原则

  1. 添加属性名称或只存在 boolean 值的属性应该使用 prop()
  2. trigger() 和 triggerHandle() 的区别之一: 前者会冒泡,触发默认的浏览器事件,后者不会冒泡
  3. append() 和 appendTo () 的区别之一: appendTo 可以将元素移动到另一个地方
  4. end() 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。
  5. find() 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。方法与 children() 相似, 而不同的是 children 方法只会查找子元素,不会涉及到孙元素

JQ 中的 AJAX

  1. $.Ajax()
  2. load( url , [data],callback) / $.get() / $.post() 最简单的方法, 功能是 能载入远程 HTML代码,并插入到 DOM 中
  3. $.getScript and $.getJSON()
FEATURED TAGS
jQuery
FRIENDS